<template>
  <div>
    <headNav title="我的班级" ></headNav>
    <div class="flexHeight" >
      <div class="flexCenter setUpCss"  >
        <span class="titleTextCss" >仅显示担任班主任班级</span>
        <div @click="setUpClick">
          <img src="@/assets/img/my/blueSetUp.png" mode="" >
          <span>设置</span>
        </div>
      </div>
      <div class="bottomDivCss" v-for="(val, index) in classList" :key="index" >
        <div class="flexCenter imgDiv" >
          <img :src="val.qrCodeUrl" mode="" @click="qrclick(val.qrCodeUrl)" >
        </div>
        <div class="flexHeight textDiv" >
          <div class="textCss" >
            <span>{{val.gradeName}}{{val.name}}</span>
            <span style="color: #128FEF; margin-left: 0.3rem; " @click="pendingTrialClick(val)" >待审核{{val.parentApprovalCount}}人 > </span>
          </div>
          <div class="flexAlign" style="margin-top: 0.5rem; font-size: 0.28rem;" >
            <span>班级号</span>
            <span class="classNumCss" >{{val.qrCode}}</span>
            <button type="default" class="code" :data-clipboard-text="val.qrCode"  @click="copy" >复制</button>
          </div>
        </div>
      </div>
    </div>
    <!-- 点击二维码弹窗 -->
     <x-dialog v-model="showHideOnBlur" class="dialog-demo xdialog" hide-on-blur>
      <div class="flexCenter" >
        <img :src="letFaGo" alt="" style="width: 100%;" >
      </div>
     </x-dialog>
     <!-- 设置按钮弹窗 -->
     <x-dialog v-model="showHideOnBlurs" class="dialog-demo" >
      <div>
        <div class="flexHeight dialogTitle" >
          <span>家长审核设置</span>
        </div>
        <div class="establishCss" >
          <checklist title="" :options="commonList" v-model="demo1" :max="1" ></checklist>
        </div>
        <!-- <div class="flexHeight dialogTitle" >
          <span>班级对应学校码</span>
          <span class="tipsCss" >学校码仅可设置一次，请再三确认后保存</span>
        </div>
        <div class="flexCenter" style="margin-top: 0.3rem; " v-for="(val, index) in classNum" :key="index" >
          <span>{{val.name}}:</span>
          <span v-if="val.num" style="margin: 0 2.7rem 0 0.2rem;" >{{val.num}}</span>
          <input v-if="!val.num" type="text" value="" placeholder="请输入班级码" />
          <span v-if="!val.num" style="color: #128FEF;" >保存</span>
        </div> -->
        <button type="default" @click="change" >确定</button>
      </div>
     </x-dialog>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getTrialClassApi, getSetUpApi, putSetUpTwoApi } from '@/api/myNewApi'
import Clipboard from 'clipboard'  // 移动端复制功能
import { XDialog, CheckIcon, Checklist } from 'vux'
export default {
  components: {
    headNav,
    XDialog,
    CheckIcon,
    Checklist
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      teacherId: state => state.user.teacherId
    })
  },
  data () {
    return {
      classList: [],
      showHideOnBlur: false,  // 控制二维码弹窗
      letFaGo: '',  // 二维码
      showHideOnBlurs: false,
      demo1: [2],
      commonList: [
        {key: 1, value: '全部申请均需审核'},
        {key: 2, value: '仅同名学生申请进行审核'}
      ],
    }
  },
  methods: {
    // 点击设置触发事件
    async setUpClick () {
      let res = await getSetUpApi()
      this.demo1 = [res.parentApprovalConfig + 1]
      this.showHideOnBlurs = true
    },
    // 设置  弹窗确定按钮触发事件
    async change () {
      if (this.demo1.length == 0) {
        this.$vux.toast.text('请至少选择一个设置选项', 'middle')
        return
      }
      let params = {
        parentApprovalConfig: this.demo1[0] - 1
      }
      await putSetUpTwoApi(params)
      let res = await getSetUpApi()
      this.demo1 = [res.parentApprovalConfig + 1]
      this.$vux.toast.text('设置成功', 'middle')
      this.showHideOnBlurs = false
    },
    // 点击二维码触发事件
    qrclick (e) {
      this.letFaGo = e
      this.showHideOnBlur = true
    },
    // 复制按钮功能实现
    copy () {
      var clipboard = new Clipboard('.code')
      clipboard.on('success', e => {
        console.log(e)
        this.$vux.toast.text('班级码复制成功', 'middle')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        this.$vux.toast.text('复制失败', 'middle')
        clipboard.destroy()
      })
    },
    // 待审核点击触发事件
    pendingTrialClick (e) {
      localStorage.reviewClass = JSON.stringify(e)
      this.$router.push('toExamineList')
    },  
    // 获取需审核班级封装
    async packTrialClass () {
      let list = []
      this.classList = []
      let res = await getTrialClassApi(this.teacherId)

      for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < res[i].classes.length; j++) {
          list.push(res[i].classes[j])
        }
      }
      for (let val of list) {
        if (val.isChargeTeacher) {
          this.classList.push(val)
        }
      }
      console.log(this.classList)
    }
  },
  async mounted() {
    this.packTrialClass()
  }
}
</script>
<style lang="less" scoped >
 .bottomDivCss {
   width: 6.6rem;
   height: 2.5rem;
   background: #FFF;
   border-radius: 0.15rem;
   margin: 0.2rem 0.3rem;
   display: flex;
   .textCss {
     display: flex;
     font-size: 0.3rem;
     margin-top: 0.5rem;
   }
   .textDiv {
     width: 4rem;
     height: 100%;
   }
   .imgDiv {
     width: 2.5rem;
     height: 100%;
   }
   img {
     width: 2rem;
   }
   button {
     width: 1.2rem;
     height: 0.5rem;
     font-size: 0.26rem;
     background: #128fef;
     color: #FFF;
     border-radius: 0.25rem;
     border: 0;
   }
   .classNumCss {
     font-size: 0.3rem;
     color: #FF9900;
     margin:  0 0.2rem;
   }
 }

.titleTextCss {
  margin: 0.3rem 0 0.2rem 0.4rem;
  font-size: 0.28rem;
  color: #666666;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialogTitle {
   font-weight: 600;
   font-size: 0.32rem;
   margin: 0.3rem 0 0.1rem 0;
 }

 .establishCss {
   font-size: 0.3rem;
 }

 .dialog-demo {
  button {
    width: 2.4rem;
    height: 0.75rem;
    background: #128FEF;
    color: #FFF;
    border: 0;
    border-radius: 0.4rem;
    margin: 0.6rem 0 0.3rem 0;
    font-size: 0.32rem;
  }
   input {
     width: 2.8rem;
     height: 0.7rem;
     background: #F6F6F6;
     margin: 0 0.2rem;
     padding-left: 0.2rem;
     font-size: 0.25rem;
   }
 }

 .setUpCss {
   justify-content: space-between;
   img {
     width: 0.4rem;
     margin-right: 0.1rem;
   }
   span {
     font-size: 0.28rem;
     color: #000;
   }
   div {
     display: flex;
     align-items: center;
     margin-right: 0.5rem;
   }
 }
</style>
<style>
.establishCss .vux-check-icon > .weui-icon-success:before, .vux-check-icon > .weui-icon-success-circle:before {
  color: #128FEF!important;
}

.establishCss .weui-cell:before {
  border: none!important;
}

.establishCss .weui-cells:before {
  border: none!important;
}

.establishCss .weui-cells:after {
  border: none!important;
}

.establishCss .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before {
  color: #128FEF!important;
}
</style>